Slider Geleceği Yazanlar

ridvanturkmen78

01.07.2019 - 03:29

<!Doctype html>
<html>
<head>
<title>JAVASCRIPT OLAYI</title>
<style>
.cerceve{ width:700px; margin:0px auto; border:2px;}
#resim{width:696px; height:400px;border:2px solid green; background-image:url("gins.png");
background-repeat:no-repeat;background-size:cover;}
#resim_1{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid darkblue; float:left;}
#resim_2{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid green; float:left;}
#resim_3{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid darkblue; float:left;}
#resim_4{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid green; float:left;}
#resim_5{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid darkblue; float:left;}
</style>
</head>
<body>
<script>
function resim_1()
{ document.getElementById("resim").style.backgroundImage = 'url(gins.png)';}
function resim_2()
{ document.getElementById("resim").style.backgroundImage = 'url(org2.jpg)';}
function resim_3()
{ document.getElementById("resim").style.backgroundImage = 'url(img.jpg)';}
function resim_4()
{ document.getElementById("resim").style.backgroundImage = 'url(syn.jpg)';}
function resim_5()
{ document.getElementById("resim").style.backgroundImage = 'url(rog.jpg)';}
</script>
<div class="cerceve">
<div class="resim" id="resim"></div>
<div id="resim_1" onmouseover ="resim_1()" >1</div>
<div id="resim_2" onmouseover ="resim_2()" >2</div>
<div id="resim_3" onmouseover ="resim_3()" >3</div>
<div id="resim_4" onmouseover ="resim_4()">4</div>
<div id="resim_5" onmouseover ="resim_5()" >5</div>
</div>
</body>
</html>

Beğendim Beğenmedim

Yorum Yap

Slider

3 Cevap